import { StatisticCard } from '@ant-design/pro-components';
import { Layout } from 'antd';
import RcResizeObserver from 'rc-resize-observer';
import React, { useState } from 'react';

interface Props {
  name?: string;
}
const { Statistic, Divider } = StatisticCard;
// 脚手架示例组件
const DataStatistics: React.FC<Props> = (props) => {
  const [responsive, setResponsive] = useState(false);
  return (
    <Layout>
      <RcResizeObserver
        key="resize-observer"
        onResize={(offset) => {
          setResponsive(offset.width < 596);
        }}
      >
        <StatisticCard.Group direction={responsive ? 'column' : 'row'}>
          <StatisticCard
            statistic={{
              title: '全部',
              value: 601986875,
            }}
          />
          <Divider type={responsive ? 'horizontal' : 'vertical'} />
          <StatisticCard
            statistic={{
              title: '今日新增',
              value: 3701928,
              description: <Statistic title="占比" value="61.5%" />,
            }}
            chart={
              <img
                src="https://gw.alipayobjects.com/zos/alicdn/ShNDpDTik/huan.svg"
                alt="百分比"
                width="100%"
              />
            }
            chartPlacement="left"
          />
        </StatisticCard.Group>
      </RcResizeObserver>
    </Layout>
  );
};

export default DataStatistics;
